<style scoped lang="less">
	.warp{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		.divWrap{
			width: 100%;
			height: 100%;
			position: relative;
		}
		.title{
			background-color: #F7F7F7;
			font-size: 0.37rem;
			height: 1.17rem;
			line-height: 1.17rem;
			border-bottom: 0.03rem solid #E5E5E5;
			color:#333;
			padding-left: 0.35rem;
			
		}
		.lastP{
			font-size: 0.21rem;
			line-height:0.53rem;
			text-align: center; 
		}
		.info{
			background-color: #fff;
			.head{
				width: 100%;
				height: 1.01rem;
				padding-left: 0.35rem;			
				padding-top: 0.27rem;
				img{
					width: 0.75rem;
					height: 0.75rem;
					border-radius: 50%;
					vertical-align: middle;
				}
				span{
					color:#999;
					font-size: 0.37rem;
					margin-left: 0.21rem;
				}
			}
			.content{
				padding-left: 1.31rem;
				padding-right: 0.21rem;
				.p1{
					font-size: 0.43rem;
					color: #333;
				}
				.time{
					font-size: 0.32rem;
					color:#999;
					text-align: right;
				}
			}
			.moreinfo{
				margin-left: 1.31rem;
				margin-right: 0.21rem;
				margin-bottom: 24px;
				margin: 0.16rem 0.21rem 0.32rem 1.31rem;
				background-color: #F7F7F7;
				.head2{
					width: 100%;
					height: 1.01rem;
					padding-left: 0.27rem;			
					padding-top: 0.17rem;
					img{
					width: 0.75rem;
					height: 0.75rem;
					border-radius: 50%;
					vertical-align: middle;
					}
					p{
						font-size: 0.37rem;
						display: inline-block;
						color: #333;
						span{
							color:#999;
							font-size: 0.37rem;
							// margin-right: 0.21rem;
							margin: 0 0.21rem;
						}
					}
					
				}			
				.p1{
					font-size: 0.43rem;
					color: #333;
					padding-left: 1.23rem;
					padding-right: 0.27rem;
				}	
				.time{
					float: right;
					margin-right: 0.27rem;
				}

			}
			.hr{
				width: 87%;
				margin-left: 13%;
				// height: 0.05rem;
				background-color: #E5E5E5;
				border-bottom: 0.02rem solid #E5E5E5;
			}
		}
	}


</style>
<template>	
	<div class="warp" ref="warpRefs">
		<a href="javascript:void(0);" v-if="!pcorphone" class="backto-bighome" @click="back()"><img src="../../images/lybcak.png"/></a><!-- 返回登录页面 -->	
		<div class="divWrap" ref="listWrapper">
			<div  ref="listRefs">
				<p class="title">最新留言(<span>{{commenttotal}}</span>)</p>
				<!--留言内容-->
				<div class="info" v-for="item in commentlist">
					<div class="head">
						<!--头像-->
						<img :src=" item.headerPicture ? imgurl + item.headerPicture : staticimg+'/images/Visitorsmoren.png'"/>
						<!--用户名-->
						<span>{{item.userName ? item.userName :"游客"}}</span>
					</div>
					<!--内容-->
					<div class="content">
						<p class="p1">{{item.content}}</p>
						<p class="time">{{filter(item.createTime)}}</p>
					</div>
					<!--二级回复-->
					<div class="moreinfo clearfix" v-show="item.replyList != []" v-for="items in item.replyList">
						<div class="head2">
							<!--头像-->
							<img :src=" items.replyHeaderPicture ? imgurl + items.replyHeaderPicture : staticimg+'/images/Visitorsmoren.png'"/>
							<!--用户名-->
							<p><span style="color:#FE9333;font-weight:bold;">{{items.replyName}}</span>回复<span>{{items.byReplyName ? items.byReplyName :"游客"}}</span></p>
						</div>
						<p class="p1">{{items.content}}</p>
						<p class="time">{{filter(items.createTime)}}</p>
					</div>
					<!--底线-->
					<div class="hr"></div>
				</div>
				<!-- 已经到底了 -->
				<p class="lastP" v-show="lastPFlg">已经是全部内容了</p>
			</div>
		</div>
	</div>
</template>
<script>
    import { mapState } from 'vuex'
    import global from '../../config/global'
    import '../../js/flexible.debug.js'
	import '../../less/moblie.less'
	import BScroll from "better-scroll"
    export default {
		data() {
			return {
				imgurl:global.imgurl,
				staticimg:global.staticimg,
				videourl:global.videourl,
				hosturl:global.host,
				commentlist:[],
				commenttotal:"",//评论数量
				pcorphone:"",
				pageNum:1,
				lastPFlg:false,
			}
		},
		components: {
		},
		computed: {
		},
		created() {
			this.ajax();
			this.browserRedirect();
		},
		watch: {
		},
		mounted(){
			var this_ = this;
			setTimeout(() => {
				this_.inits();				
				this_._cacluateHeight()
			}, 500);
		},
        computed: mapState({ user: state => state.user }),
		methods:{
			ajax(page){
				this.$http.get(this.hosturl+"/cemeterySweep/unsecured/query?cemeteryId="+this.$route.query.cemeteryId+"&startPage="+(page?page:1)+"&pageSize="+20)
				.then((response) => {
					if(response.body.status == 1){
						this.commentlist.push.apply(this.commentlist,response.body.result); 
						this.commenttotal = response.body.total;
						if(response.body.total == this.commentlist.length){
							console.log('全部查出');
							this.lastPFlg = true;
						}
					}
				})
				.catch(function (response) {
				})
			},
			filter(value) {//value为13位的时间戳
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(value));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + '-' + add0(m) + '-' + add0(d) + '';
			},
			back(){
				window.history.go(-1);
			},
			inits() {//better-scroll
				var initDom = this.$refs.listWrapper; 
				this.list = new BScroll(initDom, {
					// click: true,
					// probeType : 3,
				});
				console.log(this.list);
				this.list.on('touchEnd', (pos) => {
					// 下拉动作
					if (Math.abs(pos.y)+this.$refs.warpRefs.clientHeight >= this.$refs.listRefs.clientHeight) {
						//加载更多
						this.pageNum = this.pageNum + 1;
						// var page = page + 1;
						this.ajax(this.pageNum);
					}
				})
			},
			_cacluateHeight() {//页面渲染完计算列表dom的高度存储起来
				// var  cacluateChild = this.$refs.listRefs.children,
				// height = -10;
				// this.cacluateHeight.push(height);
				// for (var i = 1; i < cacluateChild.length; i++) {
				// 	height += cacluateChild[i].clientHeight;
				// 	this.cacluateHeight.push(height);
				// };
			},
			browserRedirect() {	//判断PC或者Phone
				var result = 0;
				var sUserAgent = navigator.userAgent.toLowerCase();
				var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				var bIsMidp = sUserAgent.match(/midp/i) == "midp";
				var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
				var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
				var bIsAndroid = sUserAgent.match(/android/i) == "android";
				var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
				var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
				if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {				
					this.pcorphone =  1;//手机
				} else {				
					this.pcorphone =  0;//PC
				}				
			},
		}
    }
</script>